<template>
<!--  新闻页面-->
  <div id="top">
    <div>
      <el-card id="search">
<!--        <el-input v-model="" placeholder="请输入标题名"></el-input>-->
        <el-input v-model="userinfo" placeholder="请输入作者名"></el-input>
        <el-button type="primary" plain @click="doQury()">查询</el-button>
        <el-button type="danger" plain @click="doshenhe()">审核</el-button>
        <el-button type="success" plain @click="show()">添加</el-button>
        <el-button type="danger" plain @click="dontPass()">查看未通过</el-button>
      </el-card>
    </div>
    <el-table :data="currentPageData" stripe style="width: 100%" >
      <el-table-column prop="nid" label="新闻ID" width="280"/>
      <el-table-column prop="ntitle" label="新闻标题" width="280"/>
      <el-table-column prop="user.uname" label="发布作者" width="280"/>
      <el-table-column prop="createdate" label="发布时间" width="480"/>
      <el-table-column fixed="right" label="操作" width="320">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="viewDetall(scope.row)" v-show="shakanshanchu">
            查看
          </el-button>
          <el-popconfirm title="你确定要删除此新闻吗?" @confirm="del(scope.row)">
            <template #reference>
              <el-button link type="primary" size="small" v-show="shakanshanchu">删除</el-button>
            </template>
          </el-popconfirm>
<!--          <el-popconfirm title="你确定要通过吗?" @click="viewPass(scope.row)">-->
<!--            <template #reference>-->
<!--              <el-button link type="primary" size="small" v-show="shenhe">通过</el-button>-->
<!--            </template>-->
<!--          </el-popconfirm>-->
<!--          <el-popconfirm title="你确定要不通多吗?" @click="viewDont(scope.row)">-->
<!--            <template #reference>-->
<!--              <el-button link type="primary" size="small" v-show="shenhe">不通过</el-button>-->
<!--            </template>-->
<!--          </el-popconfirm>-->
          <el-button link type="primary" size="small" v-show="shenhe" @click="viewPass(scope.row)">
            通过
          </el-button>
          <el-button link type="primary" size="small" v-show="shenhe" @click="viewDont(scope.row)">
            不通过
          </el-button>
          <div v-show="wtg">未通过</div>
        </template>
      </el-table-column>
    </el-table>


    <!--  分页组件-->
    <el-pagination
        v-model="currentPage"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalData.length"
        @current-change="handleCurrentChange">
    </el-pagination>


    <!--  添加组件-->
    <el-dialog :title="添加新闻"  v-model="addnews">
      <el-form
          label-position="right"
          label-width="100px"
          :model="news"
          style="max-width: 800px"
      >
        <el-form-item label="标题">
          <el-input v-model="news.ntitle" placeholder="大标题" style="width: 450px" />
        </el-form-item>
        <el-form-item label="管理员" v-show="false">
          <el-input v-model="news.uid" placeholder="管理员" style="width: 450px" />
        </el-form-item>
        <el-form-item label="副标题">
          <el-input v-model="news.nsubhead" placeholder="小标题" style="width: 450px" />
        </el-form-item>
        <el-form-item label="详细信息" >
<!--          <el-input type="textarea" :rows="5" v-model="news.ndetail" placeholder="详细信息" />-->
          <QuillComp @update="getDetail" style="width: 800px;height: 500px"></QuillComp>
        </el-form-item>
        <el-form-item label="上传图片">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8081/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
          >
            <img v-if="news.nimg" :src="news.nimg" class="avatar"/>
            <el-icon v-else class="avatar-uploader-icon">
              <Plus/>
            </el-icon>
          </el-upload>
        </el-form-item>
        <div class="button">
          <el-button @click="subNews()">提交</el-button>
          <el-button @click="reset()">重置</el-button>
        </div>

      </el-form>
    </el-dialog>
  </div>
<!--  查看-->
  <el-dialog
      v-model="dialogVisible"
      title="新闻信息详情"
      width="68%"
      height="30%"
      :before-close="handleClose">
    <table >
      <tr>
        <td style="height:65px;width: 120px">标题：</td>
        <td>{{news.ntitle}}</td>
      </tr>

      <tr>
        <td style="height: 65px;width: 120px">副标题：</td>
        <td>{{news.nsubhead}}</td>
      </tr>

      <tr>
        <td style="height: 35px;width: 120px">内容：</td>
        <td><div v-html="news.ndetail" style="width: 1000px"></div></td>
      </tr>
    </table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="dialogVisible=false">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>

import doThis from "@/api/getData";
import {ElMessage} from "element-plus";
import QuillComp from "@/util/QuillComp.vue";

export default {
  name: "NewsList",
  data() {
    return {
      newsList:[],
      userinfo:'',
      nowsize: 5,
      addnews: false,
      dialogVisible:false,
      news: {
        ndetail: '',
        nsubhead: '',
        ntitle: '',
        nid: '',
        nimg: ''
      },
      shenhe:false,
      wtg:false,
      shakanshanchu:true,
      //分页
      tableData: [], // 总数据
      totalData: [], // 总数据
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页显示的条数
    }
  },
  components: {
    QuillComp
  },
  computed:{
    // 根据当前页面和每页显示的条数，计算分页后的数据
    currentPageData() {
      const { totalData, currentPage, pageSize } = this;
      const start = (currentPage - 1) * pageSize;
      const end = start + pageSize;
      totalData.map
      return totalData.slice(start, end);
    },
  },
  mounted() {
    this.getNewslist()
  },
  methods: {
    getDetail(e) {
      this.news.ndetail = e
      console.log(e)
    },
    // 切换页码时的回调函数
    handleCurrentChange(page) {
      this.currentPage = page;
    },
    //查询全部
    getNewslist(){
      doThis.doGet("/news/list",{nstatus:2}).then(res =>{
        console.log('res=========',res)
        // this.newsList=res.data
        this.shenhe=false
        this.tableData=res.data
        this.totalData=res.data
      })
    },
    //添加
    subNews(){
      doThis.doGet("/news/insert",this.news).then(res=>{
        // alert()
        // ElMessage.error(res.msg)
        if (res.code === "0") {
          ElMessage({
            message: res.msg,
            type: 'success',
          })
          this.reset()
        }else {
          ElMessage.error(res.msg)
        }
      })
    },
    reset(){
      this.news = {
        ndetail: '',
        nsubhead: '',
        ntitle: '',
        nid: '',
        uid:'3'
      }
    },
    show() {
      this.addnews = !this.addnews
      console.log( this.addnews )
    },
    //查看
    viewDetall(row){
     this.news=row
      this.dialogVisible=true
    },
    //删除
    del(row){
      doThis.doGet("/news/delete", {nid:row.nid}).then(res =>{
        console.log(res)
        this.getNewslist()
      })
    },
    //搜索
    doQury(){
      doThis.doGet("/news/list",{uname:this.userinfo,nstatus:2}).then(res =>{
        console.log(res)
        // this.newsList=res.data
        this.shakanshanchu=true
        this.wtg=false
        this.shenhe=false
        this.bangzhu=true
        this.tableData=res.data
        this.totalData=res.data
      })
    },
    //审核页面
    doshenhe() {
      doThis.doGet("/news/list", {nstatus: 1}).then(res => {
        console.log('res=========', res)
        // this.newsList=res.data
        this.shakanshanchu=true
        this.wtg=false
        this.shenhe=true
        this.tableData = res.data
        this.totalData = res.data
      })
    },
    //通过
    viewPass(row){
      if (confirm("确定要通过吗")){
        doThis.doGet("/news/update",{nid:row.nid,nstatus:2}).then(res =>{
          console.log(res)
          // this.newsList=res.data
          // this.tableData=res.data
          // this.totalData=res.data
          this.getNewslist()
        })
      }
    },
    //不通过
    viewDont(row){
      if (confirm("确定要不通过吗")){
        doThis.doGet("/news/update",{nid:row.nid,nstatus:6}).then(res =>{
          console.log("不通过----",res.data)
          // this.tableData = res.data
          // this.totalData = res.data
          this.getNewslist()
        })
      }
    },
    //未通过展示
    dontPass(){
      doThis.doGet("/news/list", {nstatus: 6}).then(res => {
        console.log('res=========', res)
        // this.newsList=res.data
        this.wtg=true
        this.shenhe=false
        this.shakanshanchu=false
        this.tableData = res.data
        this.totalData = res.data
      })
    },
    handleAvatarSuccess(e) {
      console.log(e.data.url)
      this.news.nimg = e.data.url
    },
  }
}
</script>

<style scoped>

#top{
  margin-top: 47px;
  margin-left: -30px;
  background-color: #EBEBEB;

}

#search .el-input {
  width: 200px;
  margin-left: 30px;
  margin-right: 30px;
}

#search .el-button {
  margin-left: 30px;
  margin-right: 30px;
}
.button{
  margin-left: auto;
}
.el-icon.avatar-uploader-icon {
  border: 1px dashed var(--el-border-color);
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.avatar {
  width: 178px;
  height: 178px;
}
</style>